<script setup lang="ts">
import { inject } from 'vue';
const utils: any = inject('utils')
const imgGrid = utils.getAssetsFile('views/docs/images/', 'grid', 'png')
</script>
<template>
  <el-image loading="lazy" :src="imgGrid" />
  <div class="v-md-plugin-tip tip">
    <p class="v-md-plugin-tip-title">跨轨道放置网格项目</p>
    <p>
      &emsp;&emsp;在下面的示例中，我使用 grid-column-start (en-US)、grid-column-end (en-US)、grid-row-start (en-US) 和 grid-row-end (en-US) 属性，将前两个项目放置在三列轨道网格上。从左到右，第一个项目放置在第 1 列，并跨越到第 4 列，在我们的示例中，第 4 列是网格的最右边一行。它开始于第 1 行，结束于第 3 行，因此跨越了两条行轨。
    </p>
    <p>
      &ensp;&ensp;&ensp;&ensp;第二个项目从网格列第 1 行开始，跨越一个轨道。这是默认设置，因此我不需要指定终止行。它还跨越了从第 3 行到第 5 行的两条行轨道。
    </p>
    <p>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其他项目将放置在网格的空白处。
    </p>
  </div>
  <div class="v-md-plugin-tip warning">
    <p class="v-md-plugin-tip-title">看了不懂仔细读下边的内容</p>
    <br/>列由外层盒子决定，行由内部元素决定。 column指的是列的轨道; row指的是行的轨道
    <p>
      1. &#10008;&ensp;grid-auto-rows: 100px; 不是确认了每个元素高度为100px;<br/>
      &emsp;&#10004;&ensp;而是每个格子的高度为100px; [grid-row-start: 1; grid-row-end: 3;]就表示元素行从轨道1到轨道3 是两个格子的高度，元素的高度为 200 px。[grid-row-start: 3;grid-row-end: 5;]就表示元素从轨道3到轨道5 是两个格子的高度，元素的高度为 200 px。
    </p>
    <p>
      2. &#10008;&ensp;grid-template-columns: repeat(6, 1fr); 表示把盒子分成了6个重复的(1fr)六列格子;有7个轨道<br/>
      &emsp;&#10004;&ensp;[grid-column-start: 1;grid-column-end: 4;]表示元素列从轨道1到轨道4，占用3个格子。[grid-column-start: 1;]默认跨度一个轨道，占用一个格子。(同grid-column-end: 2;)
    </p>
    <p>
      3. &#10008;&ensp;对照column和row不懂就多读两遍 1. 和 2. 。还是不懂再读。
      &emsp;&#10004;&ensp;
    </p>
  </div>
  <div class="wrapper">
    <div class="box1">一
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row-start: 1;
      grid-row-end: 3;
      ===
      grid-column: 1/4;
      grid-row: 1/3;
    </div>
    <div class="box2">二
      grid-column-start: 1;
      grid-row-start: 3;
      grid-row-end: 5;
    </div>
    <div class="box3">三 - 网格的空白处: 默认占一个单元格 column: 2 - 3;row: 3 - 4</div>
    <div class="box4">四 - 网格的空白处: 默认占一个单元格 column: 3 - 4;row: 3 - 4</div>
    <div class="box5">五</div>
  </div>
  <div class="v-md-plugin-tip tip">
    <p class="v-md-plugin-tip-title">网格线定位简写</p>
    <p>
      &emsp;&emsp;对于列，可以使用 grid-column 将上面使用的完整值压缩到一行，对于行，可以使用 grid-row 将其压缩到一行。下面的示例将提供与前面代码相同的定位，但 CSS 内容要少得多。斜线字符（/）前面的值为起始网格线，斜线字符（/）后面的值为终止网格线。
    </p>
    <p>
      &emsp;&emsp;如果网格项只跨越了一个轨道，可以省略终止值。
    </p>
  </div>
  <div class="vuepress-markdown-body">
    <div class="v-md-pre-wrapper v-md-pre-wrapper-css extra-class">
<pre class="v-md-prism-css"><code><span class="token selector">.wrapper</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">grid-auto-rows</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box1</span> <span class="token punctuation">{</span>
  <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 4<span class="token punctuation">;</span>
  <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box2</span> <span class="token punctuation">{</span>
  <span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
  <span class="token property">grid-row</span><span class="token punctuation">:</span> 3 / 5<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
    </div>
  </div>
</template>
<style scoped>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  /* === */
  grid-column: 1/4;

  grid-row-start: 1;
  grid-row-end: 3;
  /* === */
  grid-row: 1/3;
}

.box2 {
  grid-column-start: 1;
  /* === */
  grid-column: 1;

  grid-row-start: 3;
  grid-row-end: 5;
  /* === */
  grid-row: 3/5;
}
</style>